import React, { Component } from 'react'
import { Tree, Tabs, message, Button, Input } from 'antd'
// import { request } from '../helper'
// import { PATH } from '../const/const'
import { get, post, put, Delete } from '@/services/https'
import { LeftOutlined, RightOutlined } from '@ant-design/icons'
const { Search } = Input
const TreeNode = Tree.TreeNode
const TabPane = Tabs.TabPane
class NetTransfer extends Component {
  state = {
    treeData: [],
    select: '',
    rSelect: '',
    tab: '1',
    info: [],
    id: '',
    from: {},
    group_id: '',
  }
  componentDidMount() {}
  componentWillReceiveProps(newProps) {
    this.setState({ treeData: newProps.treeData, group_id: newProps.group_id })
  }
  onLoadData = (treeNode) => {
    let treeData = [...this.state.treeData]
    let from = this.state.from
    return new Promise((resolve) => {
      get(
        'userad?command=getDirectoryTree&group_id=' +
          this.state.group_id +
          '&parent_id=' +
          treeNode.id
      ).then((res) => {
        this.getNewTree(treeData, res.data.child, treeNode.title, treeNode.key)
        this.setState({ treeData })
      })
      resolve()
    })
  }
  getNewTree(treeData, json, title, key) {
    let child = this.formatChildData(json)
    let loop = (data) => {
      data.forEach((item) => {
        if (item.child) {
          loop(item.child)
        } else if (item.ud_name == title) {
          item.child = child
        }
      })
    }
    loop(treeData)
  }
  formatChildData(json) {
    let tree = json.map((item, index) => ({
      path: item.ud_path,
      layer_id: item.layer_id,
      dn: item.ud_path,
      isLeaf: false,
      ud_name: item.ud_name,
    }))
    return tree
  }
  setOneTreeNode(pos, key) {
    let treeData = this.state.treeData
    let posArray = pos.split('-')
    posArray.shift()
    let t = treeData[posArray[0]]
    posArray.shift()
    for (let p of posArray) {
      t = t.children[p]
    }
    t[key] = true
    if (key === 'disabled') {
      if (this.props.tabs && this.state.tab === '2') {
        let outData = [...this.props.outData, { ...t, pos }]
        this.props.getOutData(outData)
      } else {
        let selectData = [...this.props.selectData, { ...t, pos }]
        this.props.getSelectData(selectData)
      }
    }
    this.setState({ treeData })
  }
  onSelect = (info, e) => {
    if (info.length === 0) {
      this.setState({ select: '' })
    } else {
      this.setState({ select: e.node.props.pos })
    }
    this.props.getSelectData(e.node.id)
  }
  render() {
    const loop = (data) =>
      data.map((item) => {
        if (item.child) {
          return (
            <TreeNode
              title={item.ud_name}
              path={item.dn}
              id={item.layer_id}
              key={item.layer_id}
            >
              {loop(item.child)}
            </TreeNode>
          )
        }
        return (
          <TreeNode
            title={item.ud_name}
            path={item.dn}
            id={item.layer_id}
            key={item.layer_id}
            isLeaf={item.isLeaf}
            disabled={item.disabled}
          />
        )
      })
    const treeNodes = loop(this.state.treeData)

    return (
      <div className="transfer-style-warp">
        <div className="ant-transfer">
          <div
            className="transfer-list"
            style={{ border: 'none', width: '100%' }}
          >
            <div className="ant-transfer-list-body">
              <Tree onSelect={this.onSelect} loadData={this.onLoadData}>
                <TreeNode title="组织结构" key="1" dataRef={{ child: [] }}>
                  {treeNodes}
                </TreeNode>
              </Tree>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default NetTransfer
